<template>
    <div class="speech">
        <h1 style="color: #f66;">厕所列表</h1>
        <div class="topSearch">
            <div class="demo-date-picker">
                <div class="block">
                    <!-- <span class="demonstration">Default</span> -->
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="To" start-placeholder="开始时间"
                        end-placeholder="结束时间" />
                </div>

                <!-- :size="size" -->
                <label class="font18 color-font5">关键词：</label>
                <el-input v-model="input" style="width: 240px" placeholder="请输入关键字" />
                <el-button type="primary" class="searchBtn">
                    <el-icon style="color: #00c4d7 !important">
                        <Search />
                    </el-icon>
                    <span class="searchTxt">搜索</span>
                </el-button>
            </div>
        </div>
        <div class="tableBox">
            <el-table :data="tableData" height="calc(100% - 35px)" style="width: 100%">
                <el-table-column prop="id" label="序号" width="180" />
                <el-table-column prop="voiceText" label="预警关键词" width="180" />
                <el-table-column prop="voicePath" label="预警音频" />
                <el-table-column prop="createTime" label="预警时间" />
                <el-table-column prop="name" label="宿舍号" />
                <el-table-column prop="status" label="状态" />
                <!-- <el-table-column :prop="status == 0 ? '已处理' : '未处理'" label="状态"  width="180"/> -->
                <el-table-column prop="updateTime" label="处理时间" />
                <el-table-column prop="statusName" label="处理人" />
            </el-table>
            <el-pagination page-size="10" background layout="prev, pager, next" :total="1000" prev-text="上一页"
                next-text="下一页" />

        </div>

    </div>
</template>
<script setup>
import { ref } from "vue";
const value1 = ref("");
const value2 = ref("");
const input = ref();
 
const tableData = [{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
}]
const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>

<style>
.speech {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.topSearch {
  height: 50px;
  margin-top: 30px;
  margin-left: 20px;
}

.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  /* text-align: center; */
  /* border-right: solid 1px var(--el-border-color);
  flex: 1; */
  margin-right: 5px;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}

.searchBtn {
  background: url(../../static/btn-bg.png) no-repeat;
  background-size: 100% auto;
  width: 97px;
  height: 32px;
  border: none;
  margin-left: 5px;
}
.searchTxt {
  color: #00c4d7 !important;
}

.tableBox{
  flex:1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.tableBox .el-table{
  height: 100%;
  background-color: transparent;
}
::v-deep .el-table__inner-wrapper:before{
  width: 0 !important;
  background-color: transparent !important;
}
.el-table__inner-wrapper:before{
  width: 0 !important;
  background-color: transparent !important;
}
table{
 margin: auto;
}
.el-table th.el-table__cell{
    background-color: transparent;
}
.el-table tr{
    background-color: transparent;
}
.el-table td.el-table__cell{
    border-bottom: 1px solid rgb(34, 62, 112);
}
.el-table th.el-table__cell.is-leaf{
    font-weight: 500;
    border-bottom: 2px solid rgb(0, 196, 215)
}
.el-table .cell{
    font-size: 18px;
    color: #81B3F3;
    text-align: center;
}
.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell{
  background: transparent;
}
</style>